<script setup lang="ts">
import { useStore } from '@store/index'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()

// 获取 BASEURL
const BASEURL = store.getBaseUrl()

const props = defineProps<{
    pageInfo: any
}>()

const gotoSingerInfoPage = (id: number) => {
    router.push('/singer/' + id)
}
</script>

<template>
    <ul class="singer-list">
        <li v-for="item in props.pageInfo.list" @click="gotoSingerInfoPage(item)">
            <img :src="BASEURL + '/static/image/' + item.avatar">
            <div class="singer-name">
                <span @click="gotoSingerInfoPage(item)">{{ item.name }}</span>
            </div>
        </li>

    </ul>
</template>

<style scoped lang="css">
.singer-list {
    list-style: none;
    display: grid;
    /* flex-wrap: wrap; */
    margin: 0;
    padding-left: 0;
    grid-template-columns: repeat(6, 120px);
    justify-content: space-between;

}

.singer-list li {
    /* padding-left: 24px; */
    padding-bottom: 30px;
}

.singer-list li img {
    cursor: pointer;
    width: 120px;
    height: 120px;

}

.singer-name {
    display: block;
    font-size: 12px;
    /* width: 100%; */
}

.singer-name span:hover {
    cursor: pointer;
    text-decoration-line: underline;
}</style>